<template>
  <div class="bot4">
    <div class="headerMaintitle">
      <img class="topPic" src="../assets/rightBottom3.png" alt="" />
      <div class="headerText">标题1</div>
    </div>
    <div id="bot3chart" class="bot3chart"></div>
    <div class="group">
      <div
        v-for="(item, index) in pieData"
        :key="index"
        class="item"
        :style="{ '--color': `${colorList[index]}` }"
      >
        <div class="item-point"></div>
        <div class="item-content">
          <div class="item-text">{{ item.text }}</div>
          <div class="item-value">{{ item.value + "KM" }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      appealList: {
        normal: 0,
        warn: 0,
        transact: 0,
        end: 0,
      },
      pieData: [
        { text: "球墨铸铁", value: "5" },
        { text: "PE", value: "33.37" },
        { text: "PVC", value: "12.11" },
      ],

      colorList: [
        "linear-gradient(180deg, #68EEFF, #37D9FF)",
        "linear-gradient(180deg, #70B4FF, #3D7DFF)",
        "linear-gradient(180deg, #D069FF, #A338FF)",
      ],
      streetId: 0,
    };
  },
  beforeDestroy() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const pie = this.$echarts.init(document.getElementById("bot3chart"));
      const option = {
        graphic: [
          {
            type: "text",
            style: {
              text: "管道总长",
              textAlign: "center",
              fill: "#ffffff",
              fontSize: 20,
            },
            left: "center",
            top: "60%",
          },
          {
            type: "text",
            style: {
              text: "52.48KM",
              textAlign: "center",
              fill: "#00F8FD",
              fontSize: 26,
            },
            left: "center",
            top: "37%",
          },
        ],
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#68EEFF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#37D9FF", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#70B4FF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#3D7DFF", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#D069FF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#A338FF", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["62%", "90%"],
            center: ["50%", "50%"],
            itemStyle: {
              borderRadius: 10,
              borderWidth: 2,
            },
            data: this.pieData,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        ],
      };
      pie.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.bot3chart {
  margin: 20px auto 0;
  margin-left: 70px;
  width: 265px;
  height: 265px;
}
.group {
  margin-top: -232px;
  margin-left: 380px;
  height: 189px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .item {
    display: flex;
    align-items: baseline;

    .item-point {
      background: var(--color);
      width: 17px;
      height: 17px;
      border-radius: 50%;
    }

    .item-content {
      margin-left: 12px;
      display: flex;
      align-items: center;
      // flex-direction: column;

      .item-text {
        color: #ffffff;
        font-size: 24px;
        text-align: left;
        width: 110px;
      }

      .item-value {
        margin-left: 60px;
        background: var(--color);
        -webkit-background-clip: text;
        color: transparent;
        font-size: 28px;
        font-weight: 600;
        text-align: left;
      }
    }
  }
}
</style>
